<template>
	<view class="page" v-cloak>
    <!-- 自定义头部 -->
    <view class="cu-custom" :style="[{height: CustomBar+'px',paddingTop: StatusBar+'px'}]">
    	<view class="cu-bar fixed" :style="style">
    		<view class="action" @tap="back">
    			<text class="cuIcon-back text-white"></text>
    		</view>
    		<view class="content text-white" :style="[{top:StatusBar + 'px'}]">
    			{{i18n['砍价免费拿']}}
    		</view>
        <!-- #ifndef MP-WEIXIN -->
          <view class="right padding-right text-white" @click="toggleRuleModal">
            {{i18n['规则']}}
          </view>
        <!-- #endif -->
    	</view>
    </view>
      <!-- #ifdef MP-WEIXIN -->
        <view class="text-white rules" @click="toggleRuleModal" :style="{top:CustomBar + 5 +'px'}">
          {{i18n['规则']}}
        </view>
        <!-- #endif -->
    <!-- 活动标题 -->
    <view class="bargain-title">
      <text>{{i18n['幸运享免单']}}</text>
      <text class="margin-left-sm">{{i18n['限时兑好礼']}}</text>
    </view>
    <!-- 正在砍的商品列表 -->
    <view class="my-bargain-list" v-if="myBargains.length > 0">
      <view class="my-bargain-list-title">
        {{i18n['正在进行中']}}
      </view>
      <view class="my-bargain-list-content">
        <block v-for="(item,index) in myBargains" :key="item.bargain_id">
          <view class="padding-tb-sm margin-lr-sm solid-bottom flex" @click="handleLook(item)">
              <view class="block-220 margin-right-sm radius overHidden">
				  <fu-image :src="item.thumb" mode="aspectFill"></fu-image>
              </view>
              <view class="flex-sub flex flex-direction justify-between">
                <view class="text-lg">{{i18n['已砍']}}<text class="text-color text-bold">{{item.cut_price}}</text>{{i18n['元']}},{{i18n['仅差']}}<text class="text-color text-bold">{{item.surplus_percentage}}%</text></view>
                <view class="cu-progress round sm">
                  <view class="button-color" :style="[{ width: (100 - item.surplus_percentage)+'%'}]"></view>
                </view>
                <view class="flex align-center">
                  <fu-uni-countdown backgroundColor="#94540c" color="#ffffff" :showDay="false" :seconds="item.count_down*1000" @timeup="handleOver"></fu-uni-countdown>
                  <text class="text-sm margin-left-xs" style="color: #94540c;">{{i18n['后结束']}}</text>
                </view>
                <view>
                  <button class="button-color cu-btn block round bg-theme text-white">{{i18n['继续砍价']}}</button>
                </view>
              </view>
          </view>
        </block>
      </view>
    </view>
    <!-- 活动商品列表 -->
    <view class="activity-list" v-if="lists.length > 0">
      <block v-for="(item,index) in lists" :key="index">
        <view class="list-item" @click="navToDetail(item)">
          <view class="item-box">
            <view class="item-box-title">{{item.name}}</view>
            <view class="block-220 radius overHidden">
				<fu-image :src="item.thumb" mode="aspectFill"></fu-image>
            </view>
            <view>
              <button class="cu-btn round button-color text-white">{{i18n['点击免费拿']}}</button>
            </view>
          </view>
        </view>
      </block>
    </view>
    <!-- 空布局 -->
    <view class="empty-box">
      <fu-empty-ui v-if="lists.length == 0 && isInit"></fu-empty-ui>
    </view>
    <!-- 加载状态 -->
    <uni-load-more v-if="lists.length > 5"></uni-load-more>
    <!-- 活动规则 -->
    <fu-popup v-model="showRuleModal" mode="center" width="500rpx" height="700rpx" border-radius="16" :mask-custom-style="{background: 'rgba(0,0,0,0.65)'}" :mask-close-able="false">
      <view class="rule-box">
        <view class="rule-box-title solid-bottom">
          {{i18n['活动规则']}}
        </view>
        <scroll-view class="rule-box-content" scroll-y>
          <jyf-parser :html="rules"></jyf-parser>
        </scroll-view>
        <view class="rule-box-close solid-top" @click="toggleRuleModal">
          {{i18n['关闭']}}
        </view>
      </view>
    </fu-popup>
	</view>
</template>

<script>
  import richText from '@/common/utils/richText.js';
	export default {
		data() {
			return {
        showNavbar: false, // 显示自定义标题颜色 备注: 根据页面滚动高度判断
        showRuleModal: false, // 显示规则弹窗
        status: 'more', // 加载状态
        page: 1, // 页数
        size: 10, // 每页条数
        isInit: false,
        lists: [], // 活动列表
        myBargains: [], // 我的砍价列表
        rules: "",
			}
		},
    computed: {
      style(){
        let StatusBar = this.StatusBar;
        let CustomBar = this.CustomBar;
        let isShow = this.showNavbar;
        if(isShow){
          return `height:${CustomBar}px;padding-top:${StatusBar}px;background: #ff5834;`;
        }else{
          return `height:${CustomBar}px;padding-top:${StatusBar}px;`;
        }
      }
    },
    onLoad(options) {
      this.getMyBargain();
      this.loadData();
      this.getBargainRuleData();
    },
    onPageScroll(e) {
      let scrollTop = e.scrollTop;
      if(scrollTop >= 10){
        this.showNavbar = true;
      }else{
        this.showNavbar = false;
      }
    },
    onPullDownRefresh() {
      this.page = 1;
      this.status = 'more';
      this.getMyBargain();
    },
    onReachBottom() {

    },
		methods: {
      back(){
        uni.navigateBack();
      },
      // 切换规则弹窗显示与否
      toggleRuleModal(){
        this.showRuleModal = !this.showRuleModal;
      },
      // 获取我的砍价列表
      getMyBargain(){
         this.$api.post(global.apiUrls.postMyBargainList)
         .then(res => {
           if(res.data.code == 1){
             console.log('我的砍价',res.data);
             this.myBargains = res.data.data;
           }
           uni.stopPullDownRefresh();
         })
      },
      // 获取活动商品列表
      loadData(){
        if (this.status != 'more') return;
        this.status = 'loading';
        let data = {
          page: this.page,
          list_rows: this.size,
          type: 10,
        };
        this.$api.post(global.apiUrls.postSeckillList, data)
          .then(res => {
            if (res.data.code == 1) {
              res = res.data;
              console.log('砍价列表', res);
              var totalSize = res.data.total;
              var curPageData = res.data.list;
              if (this.page == 1) this.lists = [];
              this.lists = this.lists.concat(curPageData);
              if (this.lists.length < totalSize) {
                this.status = 'more';
                this.page++;
              } else {
                this.status = 'noMore';
              }
            }
            this.isInit = true;
            uni.stopPullDownRefresh();
          }).catch(err => {
            console.log('ERROR', err);
            uni.stopPullDownRefresh();
            this.status = 'more';
          })
      },
      // 去商品详情页
      navToDetail(item){
        this.$urouter.navigateTo({
          url: '/pages/activity/bargain/bargain-detail/index',
          params: {
            goods_id: item.goods_id,
            sku_id: item.sku_id,
            activity_id: item.activity_id,
          }
        })
      },
      // 查看详情
      handleLook(item){
        uni.navigateTo({
          url: '/pages/activity/bargain/bargain-log/index?bargain_id='+item.bargain_id,
        })
      },
      // 倒计时结束
      handleOver(){
        console.log("倒计时结束")
        this.$util.debounce(() => {
          this.getMyBargain();
        },1000,true);
      },
      // 砍价规则
      getBargainRuleData(){
        this.$api.post(global.apiUrls.postOperationGetColumn, {
          category_id: 24,
        }).then(res => {
          var res = res.data
          if (res.code == 1) {
            this.rules = richText.format(res.data.content);
          } else {
            this.rules = ''
          }
        })

      }
		}
	}
</script>

<style lang="scss" scoped>
  .page{
    min-height: 100vh;
    background: linear-gradient(#ff5834,#fed892);
    padding-bottom: 32rpx;
  }
  .rules{
      position: fixed;
      right: 32rpx;
    }
  .bargain-title{
    height: 200rpx;
    font-size: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fefbfb;
    font-weight: bold;
    text-shadow: 10rpx 10rpx 0 $theme;
  }
  .my-bargain-list{
    background-color: #FFFFFF;
    margin: 0 30rpx;
    border-radius: 24rpx;
    overflow: hidden;
    .my-bargain-list-title{
      height: 70rpx;
      background-color: #fdbf0f;
      font-size: 32rpx;
      color: #FFFFFF;
      text-align: center;
      line-height: 70rpx;
    }
  }
  .activity-list{
    margin: 50rpx 30rpx 0;
    background-color: #ffe2bb;
    display: flex;
    flex-wrap: wrap;
    padding: 20rpx 10rpx;
    border-radius: 16rpx;
    .list-item{
      width: 50%;
      height: 450rpx;
      margin-bottom: 20rpx;
      .item-box{
        height: 100%;
        margin: 0 10rpx;
        background-color: #fdeccf;
        border-radius: 16rpx;
        padding: 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        .item-box-title{
          color: #442606;
          font-size: 32rpx;
          font-weight: bold;
          max-width: 260rpx;
          height: 42rpx;
          overflow: hidden;
        }
      }
    }
  }
  // 规则弹窗
  .rule-box{
    width: 100%;
    height: 100%;
    background-color: #0062CC;
    background: linear-gradient(top,#fcf9df,#fff0c4);
    .rule-box-title{
      height: 100rpx;
      font-size: 36rpx;
      line-height: 100rpx;
      text-align: center;
      font-weight: bold;
      color: #3b2204;
    }
    .rule-box-content{
      height: calc(100% - 200rpx);
      color: #615013;
      padding: 20rpx;
    }
    .rule-box-close{
      height: 100rpx;
      font-size: 32rpx;
      line-height: 100rpx;
      text-align: center;
      color: #615013;
    }
  }
  // 空布局
  .empty-box{
    margin: 50rpx 30rpx 0;
    border-radius: 16rpx;
    background-color: #ffe2bb;
  }
  // 公共样式 start
  .block-220{
    width: 220rpx;
    height: 220rpx;
    min-width: 220rpx;
    min-height: 220rpx;
    image{
      width: 100%;
      height: 100%;
    }
  }
  .button-color{
    background: $bgtheme;
  }
  .text-color{
    color: $theme;
  }
  // 公共样式 end
</style>
